<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <title>Taco Cloud</title>
</head>
<body>
    <h1>Design your Taco!</h1>
    <img th:src="@{/images/TacoCloud.png}" alt="none"/>

    <!-- form by post -->
    <form method="post" th:object="${design}">
        <!-- all type div -->
        <div class="grid">
            <!-- warp -->
            <div class="ingredient-group" id="wraps">
                <h3>Designate your wrap:</h3>
                <div th:each="ingredient : ${wrap}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
            <!-- protein -->
            <div class="ingredient-group" id="proteins">
                <h3>Pick your protein:</h3>
                <div th:each="ingredient : ${protein}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
            <!-- cheeses -->
            <div class="ingredient-group" id="cheeses">
                <h3>Choose your cheese:</h3>
                <div th:each="ingredient : ${cheese}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
            <!-- veggies -->
            <div class="ingredient-group" id="veggies">
                <h3>Determine your veggies:</h3>
                <div th:each="ingredient : ${veggies}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
            <!-- sauces -->
            <div class="ingredient-group" id="sauces">
                <h3>Select your sauce:</h3>
                <div th:each="ingredient : ${sauce}">
                    <input name="ingredients" type="checkbox" th:value="${ingredient.id}" />
                    <span th:text="${ingredient.name}">INGREDIENT</span><br/>
                </div>
            </div>
        </div>
        <!-- submit -->
        <h3>Name your taco creation:</h3>
        <input type="text" th:field="*{name}"/><br/>
        <button>Submit your taco</button>
    </form>
</body>
</html>